<!--
 * @Author: wwssaabb
 * @Date: 2021-09-13 11:24:35
 * @LastEditTime: 2021-09-16 15:25:57
 * @FilePath: \gshop-client\src\views\Shop\components\Info.vue
-->
<!-- 
  shop页面的商店详情页面，path：/shop/info
 -->

<template>
  <div class="info-content">
    <div class="dispatch-message">
      <div class="title">配送信息</div>
      <div class="dispatch-content">
        <div>
          <Tag color="#0097ff" size="medium">哇哇专送</Tag
          ><span>{{ "由商家配送提供支持，约28分钟送达，距离1.2km" }}</span>
        </div>
        <div>配送费￥{{ "4" }}</div>
      </div>
    </div>
    <div class="action_serve">
      <div class="title">活动与服务</div>
      <div class="actions">
        <div class="action" v-for="item in discountsList" :key="item.id">
          <Tag :color="discountsTags[item.tag].color">{{
            discountsTags[item.tag].name
          }}</Tag>
          <span>{{ item.content }}</span>
        </div>
      </div>
    </div>
    <div class="shop-picture-wall">
      <div class="title">商家实景</div>
      <Swipe :loop="false" class="pictures" height="200px">
        <SwipeItem class="picture" v-for="item in shopPictures" :key="item.id"
          ><img v-lazy="item.src" alt=""
        /></SwipeItem>
      </Swipe>
    </div>
    <div class="shop-info">
      <div class="title">商家信息</div>
      <div class="message-list">
        <div class="item" v-for="item in shopInfo" :key="item.id">
          <span>{{ item.label }}</span>
          <span>{{
            Array.isArray(item.value) ? item.value.join(",") : item.value
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Tag, Swipe, SwipeItem } from "vant";

//活动与服务相关
const discountsTags = [
  { name: "首单", color: "#70bc46" },
  { name: "满减", color: "#f07373" },
  { name: "特价", color: "#f1884f" },
];
const discountsList = [
  { id: 1, content: "新用户下单立减17元(不与其他活动同享优惠)", tag: 0 },
  { id: 2, content: "满35减19，满65减35", tag: 1 },
  { id: 3, content: "【立减19.5元】欢乐小食餐", tag: 2 },
  { id: 4, content: "【立减29元】火烤菠萝皇堡双人餐", tag: 2 },
  { id: 5, content: "【立减16.5元】火烤菠萝皇堡双人餐", tag: 2 },
  { id: 6, content: "【立减15元】经典安格斯单人餐", tag: 2 },
  { id: 7, content: "【立减11.95元】皇堡双人餐", tag: 2 },
  { id: 8, content: "【立减19.8元】半价单人餐", tag: 2 },
];

//商家实景相关
const shopPictures = [
  {
    id: 1,
    src: "https://fuss10.elemecdn.com/f/7f/d1422ec824a0a9d1fb879c57ab533jpeg.jpeg",
  },
  {
    id: 2,
    src: "https://fuss10.elemecdn.com/6/82/2cd3d681f5e93292b3eb49d6b412ajpeg.jpeg",
  },
  {
    id: 3,
    src: "https://fuss10.elemecdn.com/8/93/4cf527b6462eea634f69755374f88jpeg.jpeg",
  },
  {
    id: 4,
    src: "https://fuss10.elemecdn.com/3/f2/2a8796ba025a5773fd685a95ac369jpeg.jpeg",
  },
  {
    id: 5,
    src: "https://fuss10.elemecdn.com/a/c4/5a78f477fd616a51ce33586a76ddbjpeg.jpeg",
  },
];

//商家信息相关
const shopInfo = [
  { id: 1, label: "品类", value: ["包子粥店", "简餐"] },
  { id: 2, label: "商家电话", value: "18500000000" },
  { id: 3, label: "地址", value: "广东省深圳市楼村148号" },
  { id: 4, label: "营业时间", value: "09:30~23:00" },
];
</script>

<style lang="scss" scoped>
.info-content {
  padding-bottom: 20px;
  height: calc(100vh - 211px);
  background-color: #fff;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .title {
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
    font-family: "Microsoft YaHei";
    color: #000;
  }

  .dispatch-message {
    padding: 10px;
    font-size: 12px;
    color: #888;
    border-bottom: 10px solid #eee;
    .dispatch-content {
      div:first-child {
        margin-bottom: 10px;
        span {
          border-radius: 2px;
        }
      }
    }
    span {
      margin-right: 10px;
      &:not(:first-child) {
        font-size: 12px;
        color: #888;
      }
    }
  }

  .action_serve {
    padding: 10px;
    border-bottom: 10px solid #eee;

    .actions {
      .action {
        &:not(:last-child) {
          padding-bottom: 10px;
        }

        span {
          font-size: 12px;

          &:first-child {
            margin-right: 10px;
            border-radius: 2px;
          }
          &:last-child {
            color: #888;
          }
        }
      }
    }
  }

  .shop-picture-wall {
    padding: 10px 0;
    border-bottom: 10px solid #eee;

    .title {
      padding: 0 10px 10px;
    }

    .pictures {
      .picture {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        img {
          width: 100%;
          height: 75vw;
          object-fit: cover;
        }
      }
    }
  }

  .shop-info {
    padding: 10px;

    .message-list {
      .item {
        width: 100%;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        span {
          color: #888;
          &:first-child {
            font-weight: bold;
            color: #333;
          }
        }
      }
    }
  }
}
</style>
